<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
		<script src="../js/flexible.debug.js"></script>
		<script src="../js/flexible_css.debug.js"></script>
		<link rel="stylesheet" href="../css/gouwuche.css" />
	</head>
	<body>
		
			<section class="section_one">
				<div class="left"><img src="../img/left-back.png" alt="" /></div>
				<div class="center">购物车</div>
				<div class="right"></div>
			</section>
			
			<article class="article" id="article">
			<section class="section_two" id="section_two">
				<div class="circle one">
					<img src="../img/white_circle.png" class="white_circleImage"/>
					<img src="../img/right.png" style="display: none;" class="rightImage"/>
				</div>
				<div class="girl">
					<dl>
						<dt><img src="../img/girl_one.png" alt="" /></dt>
						<dd>
							<h4>花名册&nbsp;2016春天新款&nbsp;文艺棉质</h4>
							<p><span class="span_one">￥69元</span><span class="span_two">￥118元</span></p>
							<h2>
								<div class="zengjian">
									<span class="minus">-</span>
				                   	<input type="text" value="1" class="count">
				                    <span class="add">+</span>
			                    </div>
			                    <div class="lajitong">
			                    	<img class="show_one" src="../img/lajitong.png" alt="" />
			                    	<img style="display: none;" class="hide_one" src="../img/red_lajitong.png"/>
			                    </div>
		                    </h2>
						</dd>
					</dl>
				</div>
			</section>
			<section class="section_two">
				<div class="circle two">
					<img src="../img/white_circle.png" style="display: none;" class="myImage"/>
					<img src="../img/right.png" class="redImage"/>
				</div>
				<div class="girl">
					<dl>
						<dt><img src="../img/girl_one.png" alt="" /></dt>
						<dd>
							<h4>花名册&nbsp;2016春天新款&nbsp;文艺棉质</h4>
							<p><span class="span_one">￥69元</span><span class="span_two">￥118元</span></p>
							<h2>
								<div class="zengjian">
									<span class="minus">-</span>
				                   	<input type="text" value="1" class="count">
				                    <span class="add">+</span>
			                    </div>
			                    <div class="lajitong">
			                    	<img src="../img/red_lajitong.png" alt="" class="hide_two"/>
			                    	<img src="../img/lajitong.png" alt="" style="display: none;" class="show_two"/>
			                    </div>
		                    </h2>
						</dd>
					</dl>
				</div>
			</section>
		</article>
		<footer>
			<div class="quanxuan">
				<img src="../img/white_circle.png" alt="" class="hide"/>
				<img src="../img/right.png" style="display: none;" class="show"/>
			</div>
			<div class="title"><a>全选</a>  <a>合计<span>￥<u class="money" id="money">69</u>元</span>&nbsp;不含运费</a> </div>
			<div class="jiesuan">去结算</div>
		</footer>
		
		<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
		<script type="text/javascript">
		$(function () {
				$(".section_one .left img").click(function () {
					location.href="gerenzhongxingai.html"
				})
//				$(".section_two .lajitong").click(function(){
//					$(".section_two").css("display","none");
//				})
					
				
			})
			$(function  () {
				$(".hide_one").click(function(event){
					$(this).parent().parent().parent().parent().parent().parent().remove();
					
				})
				$(".hide_two").click(function(event){
					$(this).parent().parent().parent().parent().parent().parent().remove();
					
				})
				
				var flag = null;
				$('.one').click(function  () {
					if ( flag ) {
					    $('.white_circleImage').show();
				        $('.rightImage').hide();
				        $(".hide_one").hide();
				        $(".show_one").show();
				        flag = false;
				    } else {
					    $('.white_circleImage').hide();
				        $('.rightImage').show();
				        $(".hide_one").show();
				        $(".show_one").hide();
				        flag = true;
				    }
				});
				
				$('.two').click(function  () {
					if ( flag ) {
					    $('.myImage').hide();
				        $('.redImage').show();
				        $(".show_two").hide();
				        $(".hide_two").show();
				        flag = false;
				    } else {
					    $('.myImage').show();
				        $('.redImage').hide();
				         $(".show_two").show();
				        $(".hide_two").hide();
				        flag = true;
				    }
				})
				$(".quanxuan").click(function () {
					if ( flag ) {
					    //全选图标
						$(".show").hide();
						$(".hide").show();
						
						//第一个图标
						$('.white_circleImage').show();
					    $('.rightImage').hide();
					    
					    //第二个图片
						$('.myImage').show();
					    $('.redImage').hide();
				        flag = false;
				    } else {
					    //全选图标
						$(".show").show();
						$(".hide").hide();
						
						//第一个图标
						$('.white_circleImage').hide();
					    $('.rightImage').show();
					    
					    //第二个图片
						$('.myImage').hide();
					    $('.redImage').show();
					    flag = true;
				    }
				})
			})
		</script>
		<script>
		//window.onload = function () {
			
			var article = document.getElementById("article");
			var money = document.getElementById("money");
			
			//console.log(m_val)
//				section_two = document.getElementById("section_two");
				
//				zengjian = document.getElementById("zengjian"),
//				minus = document.getElementById("minus"),
//				count = document.getElementById("count"),
//				add = document.getElementById("add");
				article.onclick = function(event){
					event = event || window.event;
					var target = event.target || event.srcElement;
					if(target.className == "add"){
						var input = target.previousSibling.previousSibling;
						//console.log(input)
						var val = parseInt(input.value);
						console.log(val)
						//var m_val = money.innerHTML;
						if(val < 8){
							input.value = val + 1;
							var shuliang = input.value;
							var sss = money.innerHTML = shuliang * 69 ;
							console.log(sss)
						}
					}else if(target.className == "minus"){
						var input = target.nextSibling.nextSibling;
						//console.log(input)
						var val = parseInt(input.value);
						if(val > 0){
							input.value = val - 1;
							var shuliang = input.value;
							money.innerHTML = shuliang * 69 ;
						}
					}
				}
			//}	
			
		</script>
	</body>
</html>
